layui.use(['table', 'layer', 'upload', 'element', 'form', 'util'], function () {
    var table = layui.table;
    var layer = layui.layer;
    var upload = layui.upload;
    var element = layui.element;
    var form = layui.form;
    var util = layui.util;
    // 渲染表格
    table.render({
        elem: '#ID-table-demo-data',
        toolbar: '#toolbarDemo',
        defaultToolbar: ['filter', 'exports', 'print', {
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips'
        }],
        cols: [[ //标题栏
            {type: 'checkbox', fixed: 'left'},
            {field: 'id', title: 'ID', width: 200, sort: true},
            {field: 'username', title: '用户名称', width: 200},
            {field: 'fileSize', title: '文件大小(MB)', width: 200},
            {field: 'createTime', title: '上传时间', width: 200},
            {field: 'fileIndex', title: '图片', width: 500, templet: '#avatarTpl'}
        ]],
        page: true,
        limits: [10, 20, 30],
        limit: 10,
        parseData: function (res) { //res 即为原始返回的数据
            return {
                "code": res.code === "00000" ? 0 : 1, //解析接口状态
                "msg": res.message, //解析提示文本
                "count": res.data.total, //解析数据长度
                "data": res.data.list //解析数据列表
            };
        },
        url: "/api/v1/user/picList" // 数据接口
    });

    // 图片预览功能
    window.showPreview = function (img) {
        var src = img.src;
        var previewImg = document.createElement('img');
        previewImg.src = src;
        previewImg.style.position = 'absolute';
        previewImg.style.width = '300px';
        previewImg.style.height = '420px';
        previewImg.style.zIndex = 1000;
        previewImg.style.top = img.getBoundingClientRect().top + 'px';
        previewImg.style.left = img.getBoundingClientRect().left + 200 + 'px';
        previewImg.id = 'previewImg';
        document.body.appendChild(previewImg);
    };

    window.hidePreview = function (img) {
        var previewImg = document.getElementById('previewImg');
        if (previewImg) {
            previewImg.remove();
        }
    }

    var $ = layui.$;
    // 单图片上传
    var uploadInst = upload.render({
        elem: '#ID-upload-demo-btn',
        url: '/api/v1/user/filePath',

        done: function (res) {

            $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
        },
    });

    // 开始打包下载图片
    $('#getCheckData').click(function () {
        // 下载前
        var savedPath = localStorage.getItem('directoryPath');
        $.ajax({
            url: '/api/v1/download/picture?dirPath=' + savedPath,
            type: 'GET',
            contentType: 'application/json',
            success: function (response) {
                // 在成功响应中设置 cookie
                if (response.code === "00000") {
                    layer.msg("正在下载中，请稍后...", {icon: 1})
                }
            }
        });
        $('#getCheckData').attr('disabled', true).addClass('layui-btn-disabled');
        var DISABLED = 'layui-btn-disabled';
        var n = 0;
        var timer = setInterval(function () {
            $.ajax({
                url: '/api/v1/download/process',
                type: 'GET',
                contentType: 'application/json',
                success: function (response) {
                    // 在成功响应中设置 cookie
                    if (response.code === "00000") {
                        n = response.data;
                        element.progress('demo-filter-progress', n + '%');
                    }
                    if (n === "100.00") {
                        layer.msg("图片下载完成", {icon: 1, time:3000})
                        $('#dynamicButton').attr('disabled', false).removeClass('layui-btn-disabled');
                    }
                }
            });

        }, 3000);
    })
});